import Avatar from '@/asset/avatar.png';
import ErrorComp from '@/components/common/error-comp';
import DownToTopView from '@/components/common/motion/down-to-top-view';
import QueryImage from '@/components/common/query-image';
import { listAllConversations } from '@/service/query/message';
import Link from 'next/link';

export const metadata = {
  title: '消息管理',
};

export default async function Page() {
  const { result, error } = await listAllConversations();
  if (error) return <ErrorComp message={error.message} />;

  return (
    <div className="pb-10 px-16 pt-20 min-h-screen shadow-lg">
      <div className="text-xl font-bold mb-4">商家消息</div>
      <DownToTopView>
        <div className="space-y-12">
          {result.length > 0 ? (
            result.map((item) => (
              <Link href={`/message/${item.id}`} key={item.id}>
                <div
                  key={item.id}
                  className="flex items-center gap-5 hover:bg-muted rounded-lg px-5 py-3"
                >
                  <QueryImage
                    imageKey={item.shop.imageKeys[0] ?? undefined}
                    defaultImage={Avatar}
                    wrapperClassName="w-10 h-10 rounded-full"
                    imgClassName="w-full h-full object-cover"
                  />
                  <div className="space-y-1">
                    <div>{item.shop.name}</div>
                    <div className="text-sm text-muted-foreground">
                      {item.shop.description}
                    </div>
                  </div>
                </div>
              </Link>
            ))
          ) : (
            <div className="text-center">暂无消息</div>
          )}
        </div>
      </DownToTopView>
    </div>
  );
}
